<script setup>
import { computed, ref } from 'vue';

/**
 * 弹窗
 * @props {Boolean} isMaskClick 是否点击遮罩关闭
 * @props {Boolean} autoClose 是否自动关闭
 * @props {String} position 弹出层位置
 *
 * @expose open(options) 打开弹窗
 * @expose close() 关闭弹窗
 *
 * @options {String} title 标题
 * @options {String} content 内容
 * @options {String} cancelText 取消按钮文字
 * @options {String} submitText 确认按钮文字
 * @options {Boolean} cancelShow 是否显示取消按钮
 * @options {Boolean} submitShow 是否显示确认按钮
 * @options {Function} success 成功回调
 * @options {Function} fail 取消回调
 * */
const props = defineProps({
  // 是否点击遮罩关闭
  isMaskClick: {
    type: Boolean,
    default: true
  },
  // 是否自动关闭
  autoClose: {
    type: Boolean,
    default: true
  },
  // 弹出层位置
  position: {
    type: String,
    default: 'center'
  }
});
const popupRef = ref(); // 弹出层
const successFunc = ref(); // 成功回调
const failFunc = ref(); // 取消回调
const maskFunc = ref(); // 点击遮罩
const cancelText = ref(''); // 取消按钮
const submitText = ref(''); // 确认按钮
const cancelShow = ref(true); // 取消按钮是否显示
const submitShow = ref(true); // 确认按钮是否显示
const title = ref('');
const content = ref('');

const open = ({
  title: t,
  content: cont,
  cancelText: cText = '取消',
  submitText: sText = '确定',
  cancelShow: cShow = true,
  submitShow: sShow = true,
  success,
  fail,
  mask,
  load
}) => {
  title.value = t;
  content.value = cont;
  cancelText.value = cText;
  submitText.value = sText;
  cancelShow.value = cShow;
  submitShow.value = sShow;
  successFunc.value = success;
  maskFunc.value = mask;
  failFunc.value = fail;
  popupRef.value.open(props.position);
  load && load();
};

const close = () => {
  popupRef.value.close();
};

defineExpose({ open, close });

// 取消
const onCancel = () => {
  close();
  if (failFunc.value) failFunc.value();
};

// 确认
const onSubmit = () => {
  if (props.autoClose) {
    close();
  }
  if (successFunc.value) {
    successFunc.value(() => {
      close();
    });
  }
};

// 点击遮罩
const onMaskClick = () => {
  if (props.isMaskClick) {
    close();
    if (maskFunc.value) maskFunc.value();
  }
};

// 圆角
const borderRadius = computed(() => {
  const pos = {
    top: '0 0 24rpx 24rpx',
    bottom: '24rpx 24rpx 0 0',
    center: '24rpx'
  };
  return pos[props.position];
});
</script>

<template>
  <uni-popup
    ref="popupRef"
    :border-radius="borderRadius"
    :is-mask-click="props.isMaskClick"
    background-color="#ffffff"
    @maskClick="onMaskClick"
  >
    <view :class="{ 'withdraw-dialog-bottom': position === 'bottom' }" class="withdraw-dialog">
      <view class="withdraw-dialog-title">{{ title }}</view>
      <slot>
        <view class="withdraw-dialog-content">{{ content }}</view>
      </slot>
      <view class="withdraw-dialog-btn">
        <button v-if="cancelShow" class="button cancel-btn" @click="onCancel">{{ cancelText }}</button>
        <button v-if="submitShow" class="button primary-button submit-btn" hover-class="hover" @click="onSubmit">
          {{ submitText }}
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.withdraw-dialog {
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: 656rpx;
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 24rpx;

  .withdraw-dialog-title {
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;
    text-align: center;
    margin-bottom: 12rpx;
  }

  .withdraw-dialog-content {
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    text-align: center;
    margin-bottom: 28rpx;
    padding: 0 54rpx;
  }

  .withdraw-dialog-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    .cancel-btn {
      flex-shrink: 0;
      width: 35%;
      margin-right: 14rpx;
    }

    .submit-btn {
      margin-left: 14rpx;
    }
  }
}

.withdraw-dialog-bottom {
  width: 100%;
  padding-bottom: $uni-padding-bottom;
}
</style>
